import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shimmer_animation/shimmer_animation.dart';
import 'package:shimmer/shimmer.dart' as shimmerText;
import '../generated/assets.dart';

class HomeScrollerWidget extends StatefulWidget {

  const HomeScrollerWidget({
    super.key,
  });

  @override
  State<HomeScrollerWidget> createState() => _HomeScrollerWidgetState();
}

class _HomeScrollerWidgetState extends State<HomeScrollerWidget> {
  double itemExtent = 0;


  final ScrollController _controller = ScrollController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, con) {
      itemExtent = con.maxHeight;
      return CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.red,
          )),
          SliverPersistentHeader(
            delegate:
                _HomeScrollerPersistentHeaderDelegate(itemExtent: itemExtent),
          ),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.green,
          )),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.red,
          )),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.blue,
          )),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.red,
          )),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.blue,
          )),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.red,
          )),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.blue,
          )),
          SliverToBoxAdapter(
              child: Container(
            height: con.maxHeight,
            color: Colors.red,
          )),
        ],
      );
    });
  }

  @override
  void dispose() {
    super.dispose();
  }
}

class _HomeScrollerPersistentHeaderDelegate
    extends SliverPersistentHeaderDelegate {
  // 标准高度
  final double itemExtent;

  _HomeScrollerPersistentHeaderDelegate({
    required this.itemExtent,
  });

  @override
  double get maxExtent => itemExtent * 2; // 最大高度为二倍页面高

  @override
  double get minExtent => itemExtent; // 最小高度为页面高

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    debugPrint("${shrinkOffset / itemExtent}"); // 此处结果最大可以为2
    final double percent = (shrinkOffset / itemExtent > 1)
        ? 1
        : (shrinkOffset / itemExtent); // 计算百分比，当超出1的时候则说明已经完成动画UI的展现，后续是正常滚动范围
    return Container(
      color: Colors.blue,
      child: Stack( // 使用堆叠层
        children: [
          Column(), // 用于撑开布局
          SizedBox( // 试图页面
            height: itemExtent,
            child: Stack(
              children: [
                // 手机边框及内容图片
                Center(
                  child: Transform.scale(
                    scale: 1 + (1- percent) * 4,
                    child: Stack(
                      children: [
                        Positioned(
                          top: 5,
                          right: 5,
                          left: 5,
                          bottom: 5,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(40),
                            child: Image.asset(
                              Assets.imgPhoneBg,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        Image.asset(
                          Assets.imgPhone,
                          width: 1347 * 0.5,
                        )
                      ],
                    ),
                  ),
                ),
                // iphone 文字
                Opacity(
                  opacity: 1 - percent,
                  child: Center(
                    child: SizedBox(
                      width: 1347 * 0.5,
                      height: 658 * 0.5,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          shimmerText.Shimmer.fromColors(
                            child: Text(
                              "iPhone",
                              style: TextStyle(fontSize: 60),
                            ),
                            baseColor: Colors.grey,
                            highlightColor: Colors.white,
                          )
                          //Default Value
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      true;
}
